<template>
  <div class="personal-page">
    <el-card class="profile-card">
      <!-- 用户信息头部 -->
      <div class="profile-header">
        <div class="avatar-container">
          <el-avatar :size="80" :src="userInfo.avatar || defaultAvatar" class="user-avatar" />
          <el-button type="primary" size="small" class="upload-btn" @click="handleAvatarUpload">
            {{ $t('profile.uploadAvatar') }}
          </el-button>
        </div>
        <div class="user-info">
          <h2 class="username">{{ userInfo.username || $t('profile.defaultUsername') }}</h2>
          <p class="email">{{ userInfo.email || $t('profile.noEmail') }}</p>
          <div class="user-stats">
            <div class="stat-item">
              <span class="stat-value">{{ userInfo.posts || 0 }}</span>
              <span class="stat-label">{{ $t('profile.posts') }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ userInfo.followers || 0 }}</span>
              <span class="stat-label">{{ $t('profile.followers') }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ userInfo.following || 0 }}</span>
              <span class="stat-label">{{ $t('profile.following') }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 个人资料表单 -->
      <el-tabs v-model="activeTab" class="profile-tabs">
        <el-tab-pane :label="$t('profile.basicInfo')" name="basic">
          <el-form ref="basicForm" :model="userForm" label-width="100px" class="profile-form">
            <el-form-item :label="$t('profile.username')" :for="'username'" prop="username">
              <el-input v-model="userForm.username" id="username" :placeholder="$t('profile.enterUsername')" />
            </el-form-item>
            <el-form-item :label="$t('profile.email')" :for="'email'" prop="email">
              <el-input v-model="userForm.email" id="email" type="email" :placeholder="$t('profile.enterEmail')" />

            </el-form-item>
            <el-form-item :label="$t('profile.nickname')" :for="'nickname'" prop="nickname">
              <el-input v-model="userForm.nickname" id="nickname" :placeholder="$t('profile.enterNickname')" />
            </el-form-item>
            <el-form-item :label="$t('profile.gender')" :for="'gender'" prop="gender">
              <el-radio-group v-model="userForm.gender" id="gender">
                <el-radio :label="0">{{ $t('profile.male') }}</el-radio>
                <el-radio :label="1">{{ $t('profile.female') }}</el-radio>
                <el-radio :label="2">{{ $t('profile.other') }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('profile.birthday')" :for="'birthday'" prop="birthday">
              <el-date-picker v-model="userForm.birthday" id="birthday" type="date" :placeholder="$t('profile.selectBirthday')" />
            </el-form-item>
            <el-form-item :label="$t('profile.introduction')" :for="'introduction'" prop="introduction">
              <el-input v-model="userForm.introduction" id="introduction" type="textarea" :rows="4"
                :placeholder="$t('profile.enterIntroduction')" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleBasicSubmit">{{ $t('profile.saveChanges') }}</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane :label="$t('profile.password')" name="password">
          <el-form ref="passwordFormRef" :model="passwordForm" label-width="100px" class="profile-form">
            <el-form-item :label="$t('profile.currentPassword')" :for="'currentPassword'" prop="currentPassword">
              <el-input v-model="passwordForm.currentPassword" id="currentPassword" type="password"
                :placeholder="$t('profile.enterCurrentPassword')" />
            </el-form-item>
            <el-form-item :label="$t('profile.newPassword')" :for="'newPassword'" prop="newPassword">
              <el-input v-model="passwordForm.newPassword" id="newPassword" type="password"
                :placeholder="$t('profile.enterNewPassword')" />
            </el-form-item>
            <el-form-item :label="$t('profile.confirmPassword')" :for="'confirmPassword'" prop="confirmPassword">
              <el-input v-model="passwordForm.confirmPassword" id="confirmPassword" type="password"
                :placeholder="$t('profile.confirmNewPassword')" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handlePasswordSubmit">{{ $t('profile.updatePassword') }}</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getCurrentInstance } from 'vue';

const instance = getCurrentInstance()
const { proxy } = instance

// 默认头像
const defaultAvatar = '/img/personal.png';

// 标签页状态
const activeTab = ref('basic');

// 用户信息
const userInfo = reactive({
  username: '',
  email: '',
  nickname: '',
  avatar: '',
  gender: 0,
  birthday: '',
  introduction: '',
  posts: 0,
  followers: 0,
  following: 0
});

// 基本信息表单
const userForm = reactive({
  username: '',
  email: '',
  nickname: '',
  gender: 0,
  birthday: '',
  introduction: ''
});

// 密码表单
const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// 表单引用
const basicForm = ref(null);
const passwordFormRef = ref(null);

// 生命周期钩子
onMounted(() => {
  // 模拟从API获取用户信息
  setTimeout(() => {
    // 这里应该是实际从API获取的数据
    const mockData = {
      username: 'admin',
      email: 'admin@example.com',
      nickname: '青山',
      avatar: '', // 留空使用默认头像
      gender: 0,
      birthday: '2000-01-01',
      introduction: '山花落尽山常在',
      posts: 10,
      followers: 50,
      following: 30
    };

    // 更新用户信息
    Object.assign(userInfo, mockData);
    Object.assign(userForm, mockData);
  }, 500);
});

// 处理头像上传
const handleAvatarUpload = () => {
  ElMessage.info(proxy.$t('profile.avatarUploadNotice'));
  // 实际项目中这里会调用文件上传API
};

// 提交基本信息
const handleBasicSubmit = () => {
  basicForm.value.validate((valid) => {
    if (valid) {
      // 模拟API请求
      setTimeout(() => {
        Object.assign(userInfo, userForm);
        ElMessage.success(proxy.$t('profile.saveSuccess'));
      }, 500);
    }
  });
};

// 提交密码修改
const handlePasswordSubmit = () => {
  passwordFormRef.value.validate((valid) => {
    if (valid) {
      if (passwordForm.newPassword !== passwordForm.confirmPassword) {
        ElMessage.error(proxy.$t('profile.passwordNotMatch'));
        return;
      }

      // 模拟API请求
      setTimeout(() => {
        ElMessage.success(proxy.$t('profile.passwordUpdateSuccess'));
        // 重置密码表单
        passwordForm.currentPassword = '';
        passwordForm.newPassword = '';
        passwordForm.confirmPassword = '';
      }, 500);
    }
  });
};
</script>

<style scoped>
.profile-card {
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.profile-header {
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #e6ebf1;
  margin-bottom: 20px;
}

.avatar-container {
  position: relative;
  margin-right: 20px;
}

.user-avatar {
  border: 2px solid #f0f0f0;
}

.upload-btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  font-size: 12px;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.email {
  color: #606266;
  margin-bottom: 15px;
}

.user-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
  margin-right: 5px;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

.profile-tabs {
  padding: 0 20px 20px;
}

.profile-form {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .avatar-container {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .user-stats {
    justify-content: center;
  }
}
</style>